<template>
  <div class="jiading city-warp">
    <div class="item-container" v-for="(item,index) in itemlists">
      <div
        class="city-warp-name"
        :style:StyleValue="{ 'font-size': item.name.length > 6 ? '12px' : '' }"
      >{{ item.name }}</div>
      <div class="bottom-container">
        <div class="info" v-for="(child,childindex) in item.item" :key:any="childindex">
          <div class="name">{{ child.name }}</div>
          <div class="value-unit">
            {{ child.value }}
            <span>{{ child.unit }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { reactive, ref, watch, computed, Ref } from 'vue'
import '../font/bebas/bebas.css'
declare interface iteminfo {
  item: String,
  value: String,
  unit: String,
}
declare interface itemlisttype {
  name: String,
  item: Array<iteminfo>
}
export default {
  props: {
    itemlists: Array,
  },
  setup(props) {
    let itemlists: Ref<any> = ref([])
    itemlists.value = props.itemlists;
    let rowvalues = ref(1);
    let itemvaluearr: any = ref([])
    rowvalues.value = Math.ceil(itemlists.value.length / 3);

    for (let i = 0; i < rowvalues.value; i = i + 1) {
      itemvaluearr.value[i] = itemlists.value.slice(i * 3, i * 3 + 3).length;
    }


    watch(props, (newValue) => {
      itemlists.value = newValue.itemlists

      rowvalues.value = Math.ceil(itemlists.value.length / 3);
      itemvaluearr = ref([])
      for (let i = 0; i < rowvalues.value; i = i + 1) {
        itemvaluearr.value[i] = itemlists.value.slice(i * 3, i * 3 + 3).length;
      }
    })


    return {
      itemlists,
      rowvalues,
      itemvaluearr
    }
  }
}
</script>
<style lang="scss" scoped>
.city-warp {
  width: 100%;
  max-height: 480px;
  overflow: auto;
  display: flex;
  flex-wrap: wrap;
  &::-webkit-scrollbar {
    width: 5px;
    height: 20px;
    background-color: #07304a;
  }

  &::-webkit-scrollbar-thumb {
    width: 5px;
    height: 20px;
    border-radius: 3px;
    background-color: #093f62;
  }
  .item-container {
    width: 33%;
    height: 106px;
    box-sizing: border-box;
    color: #ffffff;
    text-align: center;
    border-left: 2px solid rgba(7, 48, 74, 0.47);
    border-bottom: 2px solid rgba(7, 48, 74, 0.47);
    display: flex;
    flex-direction: column;

    .city-warp-name {
      font-size: 18px;
      font-weight: 500;
      line-height: 50px;
    }
    .bottom-container {
      flex: 1;
      font-family: Microsoft YaHei Regular, Microsoft YaHei Regular-Regular;
      height: 105px;
      display: flex;
      .info {
        flex: 1;
        .name {
          font-size: 14px !important;
          font-weight: 400;
          line-height: 20px !important;
          font-family: Microsoft YaHei Regular, Microsoft YaHei Regular-Regular !important;
        }
        .value-unit {
          font-size: 22px !important;
          font-weight: 500;
          color: #10f7ff;
          font-family: 'bebas';

          span {
            font-size: 12px;
            font-weight: normal;
          }
        }
      }
    }
  }
}
</style>
<style lang="less" scoped>
.city-warp > .item-container:nth-child(2 + 3n) {
  height: 106px;
  width: 33%;
  box-sizing: border-box;
  color: #ffffff;
  text-align: center;
  // border-left: 2px solid rgba(7,48,74,0.47);
  border-bottom: 2px solid rgba(7, 48, 74, 0.47);
}
</style>